<template>
  <a-list item-layout="horizontal" :loading="loading" :class="classVal" class="flex-1 list-box w-56">
    <template v-for="item in Object.keys($slots)" #[item]="data" :key="item">
      <slot :name="item" v-bind="data || {}"></slot>
    </template>
  </a-list>
</template>
<script setup>
defineProps({
  title: {
    type: String,
    default: ''
  },
  loading: {
    type: Boolean,
    default: false
  },
  classVal: {
    type: String,
    default: ''
  }
})
</script>
<style lang="less" scoped>
.list-box {
  overflow-x: hidden;
  overflow-y: auto;
  &::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }
  :deep(.ant-list-items) {
    & > div {
      margin: 8px 0;
      background-color: var(--thin-color);
      border: 1px solid transparent;
      border-radius: 4px;
      cursor: pointer;
      &:hover {
        background-color: var(--secondary-color);
      }
      &.active {
        background-color: var(--secondary-color);
        border: 1px solid var(--primary-color);
        border-radius: 4px;
        &:hover {
          background-color: var(--secondary-color);
        }
      }
    }
  }
}
</style>
